import React from 'react';
import Button from '../Button';

export default function Dialog(props) {
  const { children, onOk, onCancel, footer, title } = props;

  return (
    <div className="Modal_content">
      <button type="button" aria-label="Close" class="ant-modal-close">
        <span class="ant-modal-close-x">
          <span
            onClick={onCancel}
            role="img"
            aria-label="close"
            class="anticon anticon-close ant-modal-close-icon"
          >
            <svg
              t="1639788627633"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2043"
              width="200"
              height="200"
            >
              <path
                d="M391.68 667.306667a34.133333 34.133333 0 0 1-24.132267-58.2656L464.571733 512l-97.024-97.041067a34.133333 34.133333 0 1 1 48.264534-48.264533l97.041066 97.041067 96.187734-96.170667a34.133333 34.133333 0 1 1 48.264533 48.264533l-96.1024 96.1024 96.017067 95.3344a34.133333 34.133333 0 1 1-48.093867 48.4352l-96.187733-95.505066-97.109334 97.109333c-6.673067 6.656-15.4112 10.001067-24.149333 10.001067z"
                p-id="2044"
                fill="#2c2c2c"
              ></path>
            </svg>
          </span>
        </span>
      </button>
      <div className="modal_head">{title ? title : 'Basic Modal'}</div>
      <div className="modal_body">{children}</div>
      {footer ? (
        <>{footer}</>
      ) : typeof footer === 'undefined' ? (
        <div className="modal_footer">
          <Button sort="flat" kind="default" onClick={onCancel}>
            取消
          </Button>
          <Button sort="flat" kind="success" onClick={onOk}>
            确定
          </Button>
        </div>
      ) : (
        ''
      )}
    </div>
  );
}
